<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>资金明细模块</title>
    <!-- Bootstrap core CSS -->
    <link href="../static/asserts/css/bootstrap.min.css" th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../static/asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<div th:replace="sidbar::#topbar"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="sidbar::#sbar"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="chartjs-size-monitor"
                 style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                <div class="chartjs-size-monitor-expand"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                </div>
                <div class="chartjs-size-monitor-shrink"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                </div>
            </div>

            <br/>
            <div class="container-fluid" style="border:gray solid 1px ">
                <div class="row">
                    <div class="col-md-2 col-md-offset-3"> </div>
                </div>
                <div class="row" style="background: #d2ffa9;height: 50px">
                    <div style="font-size: large;" class="col-md-2" id="pname"  >
                        没有数据
                    </div>
                    <div id="selector1" style="font-size: large;" class="col-md-offset-1">
                        收入/支出：
                    </div>
                    <div class="col-lg-4 col-md-offset-3">
                        <button id="search1" class="btn-success" onclick="getTotalMoney()">查询</button>
                        <button id="order1" class="btn-success" onclick="getTotalMoney(order++)">时间排序: </button>
<!--                        <button id="MorD" class="btn-success" onclick=" getMoneyByDate()"> 按时间统计: </button>-->
                    </div>

                </div>
                <div>
                    <table id="bodyList" class="table table-bordered">
                    </table>

                    <div class="col-md-2">
                    </div>

                    <nav  aria-label="Page navigation" style="text-align: center"  id="page">
                    </nav>

                </div>
            </div>

        </main>
    </div>
</div>

<script>
    var pageNo=1;
    var order=0;
    var pages;
    var orderCN;
    var userId = location.href.split('?userId=')[1];
    $("#selector1").append($('<select id="select1"><option  value="0">默认</option> <option value="1">支出</option>\n' +
        '                        <option value="2">收入</option></select>'));
    if (pageNo<1){
        pageNo=1;
    };

    getTotalMoney();
    function getTotalMoney() {
        order=order%3;
        if (order==1){
            orderCN="最近";
        }else if (order==2){
            orderCN="最久";
        }else {
            orderCN="无序";
        }
        $("#bodyList").empty();
        $("#page").empty();
        if (pageNo>pages){
            pageNo=pages;
        };
        $("#order1").html("时间排序:"+orderCN);
        var dataEL={'pageNo':pageNo,'pageSize':10,'userId':userId,'way':$("#select1").val(),'order':order};
        $.ajax({
            type:"get",
            url:"money/getTotalMoney",
            data: dataEL,
            success:function (data) {
                if (data.code==201){
                    alert(data.status_desc)
                }else {
                    pages = data.pageparam.pages;
                    pageL = data.pageparam.pageArr;
                    var tr = $('<tbody></tbody>');
                    var th = $('<thead><tr><th>编号</th><th>流动金额</th><th>资金总额</th><th>收入/支出</th><th>时间</th>' +
                        '<th>类型</th><th>备注</th></tr></thead>');
                    // 循环列表
                    for (var i = 0; i < data.data.length; i++) {
                        var wayCN = data.data[i].way == 1 ? '支出' : '收入';
                        var pn = data.data[i].way == 1 ? '-' : '+';
                        var tempLi = '<tr><td>' + data.data[i].id + '</td>' + '<td>' + pn + data.data[i].payMoney + '</td>'
                            + '<td>' + data.data[i].totalMoney + '</td>' + '<td>' + wayCN + '</td>'
                            + '<td>' + data.data[i].createTime + '</td>' + '<td>' + data.data[i].typeCN + '</td><td>' + data.data[i].profile + '</td></tr>';
                        tr.append(tempLi);
                    }
                    ;
                    $("#pname").html("员工姓名: " + data.data[0].nickName);
                    $("#bodyList").append(th).append(tr);

                    // 分页
                    var left = $('<ul class="pagination pagination-lg"><li> <a onclick="getTotalMoney(pageNo=1)"\n' +
                        ' aria-label="Next"> <span aria-hidden="true">首页</span> </a> </li> <li> <a onclick="getTotalMoney(pageNo-=1)"\n' +
                        ' aria-label="Next"> <span aria-hidden="true">&laquo;</span> </a> </li> </ul>');
                    var pageArr = $('<ul class="pagination pagination-lg"></ul>');
                    for (var b = 1; b < data.pageparam.pageArr.length + 1; b++) {
                        var pageList = $('<li><a onclick="getTotalMoney(pageNo=' + b + ')" ></a></li>');
                        pageList.find('a').text(b)
                        pageArr.append(pageList);
                    }
                    ;
                    var right = $('<ul class="pagination pagination-lg"><li> <a onclick="getTotalMoney(pageNo+=1)"\n' +
                        ' aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> <li> <a onclick="getTotalMoney(pageNo=pages)"\n' +
                        ' aria-label="Next"> <span aria-hidden="true">末页</span> </a> </li> </ul>');
                    $("#page").append(left).append(pageArr).append(right);
                }
            },
            error:function(data){
                alert('服务器内部错误！');
            },
        });
    }


</script>
</body>

</html>
